<template>
  <el-dialog v-if="visible" :title="info.title" :visible.sync="visible" append-to-body center width="760px" :before-close="handleCancel">
    <el-form ref="formDate" label-suffix=":" label-width="120px" :rules="rules" :model="form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="待办人员" prop="receiver_id" style="width: 100%">
            <StaffSelect v-model="form.receiver_id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="待办类型" prop="type" style="width: 100%">
            <el-select v-model="form.type" size="small" style="width: 100%">
              <el-option
                v-for="item in release_types"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划开始时间" prop="begin_time">
            <el-date-picker
              v-model="form.begin_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划结束时间" prop="plan_time">
            <el-date-picker
              v-model="form.plan_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="pro_id">
            <ProSelect v-model="form.pro_id" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="待办事项" prop="matters" style="width: 100%">
            <el-row>
              <el-col :span="24" v-for="(item, index) in matters">
                <el-col :span="1">{{ index+1 }}</el-col>
                <el-col :span="19">
                  <a style="color: blue"  href="javascript:void(0)" @click="handleDialog({name: item.name, id: item.id,
                    dTitle: '处理待办', dType: 'add', dField: dField})">{{ item.name }}</a>
                </el-col>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col v-if="fileList.length > 0" :span="24" class="mb20">
          <el-form-item label="附件">
            <el-table class="search-table" :data="fileList" border fit highlight-current-row style="width: 100%;">
              <el-table-column label="序号" align="center" width="56px">
                <template slot-scope="{$index}">
                  {{ $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="文件名称" min-width="200px">
                <template slot-scope="{row}">
                  <a href="javascript:void(0)" class="tba" target="_blank" @click="handleWV(row.url)">{{ row.file_name }}</a>
                </template>
              </el-table-column>
              <el-table-column label="下载" align="center" width="90px">
                <template slot-scope="{row}">
                  <a :href="row.url" class="tba" target="_blank">下 载</a>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" :rows="4" size="small" clearable style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="fr mt10">
            <el-button size="small" @click="handleCancel()">取 消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <Dialog ref="dialog" :info="dialog" />
  </el-dialog>
</template>

<script>
import ProSelect from '@/components/ProSelect'
import Upload from '@/myComponents/Upload'
import { create, myAgent } from '@/api/agent/agent'
import { allFiles } from '@/api/file'
import form from '@/utils/form'
import StaffSelect from '@/myComponents/StaffSelect'
import Dialog from './matter-handle-dialog'

export default {
  components: { ProSelect, Upload, StaffSelect, Dialog },
  extends: form,
  props: {
    reqAdd: {
      default: create,
      type: Function
    }
  },
  data() {
    return {
      matters: [],
      fileList: [],
      release_types: [{ key: '设计时程表', value: '设计时程表' }, { key: '发包时程表', value: '发包时程表' }, { key: '施工计划', value: '施工计划' }, 
      { key: '调试计划', value: '调试计划' }, { key: '其他', value: '其他' } ],
      dField: ['id', 'name', 'remark', 'files'],
      rules: {
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$set(this, 'matters', [])
        this.$set(this, 'fileList', [])
        this.$set(this, 'form', this.info.edit)
        this.handleMyAgent()
        this.handleFiles()
      }
    },
    getData: {
      type: Function,
      default: function() {}
    }
  },
  mounted() {
  },
  methods: {
    handleMyAgent() {
      myAgent({ id: this.form.id }).then(response => {
        this.matters = response.list
      }).catch(err => {
        this.$message.error(err.msg || '请求失败')
      })
    },
    handleFiles() {
      allFiles({
        db_type: 'logc_agent_archives',
        e_ids: this.form.id
      }).then(response => {
        this.fileList = response.list
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>

<style scoped>
</style>
